<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务项目</title>
    <link rel="stylesheet" href="/css/service.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/layui-v2.6.4/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <div th:replace="common/common::head1"></div>
    <!-- 导航 -->
    <div th:replace="common/common::head2"></div>
    <!--横幅-->
    <div th:replace="common/common::head3"></div>
    <!-- 主体部分 -->
    <section class="main_body">
        <div class="container">
            <div class="ss">
                <div th:replace="common/common::head4"></div>

            </div>
        </div>
        <article>
                <main class="container">
                    <div >
                        <p class="ding" >服务项目</p>
                        <p><a href="/front/index">首页>></a><a href="#">服务项目</a></p>
                    </div>
                </main>
        </article>
        <!-- 侧边栏 -->
        <div class="layui-row" style="margin-left: 40px">
            <div class="layui-col-md2 layui-col-md-offset2" style="width: 270px">
                <aside  class="container ">
                    <nav>
                        <ul id="serviceSide">

                        </ul>
                    </nav>
                </aside>
            </div>
            <div class="layui-col-md6">
                <div class="layui-panel" style="margin-top: 20px">
                    <div style="padding: 20px 20px">
                        <blockquote class="layui-elem-quote">
                            选中左边的服务项目进行填写诉讼案件信息
                        </blockquote>
                        <div class="layui-row">
                            <div class="layui-col-md10">
                                <div style="text-align: center">
                                    <form class="layui-form">
                                        <input id="casesTypeId" name="casesTypeId" hidden>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">案件类型</label>
                                            <div class="layui-input-block">
                                                <input type="text" disabled id="casesTypeName" placeholder="未选择案件类型" lay-verify="required" autocomplete="off"  class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">案件标题</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="casesTitle" lay-verify="required" autocomplete="off" placeholder="请输入案件标题" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">案件简述</label>
                                            <div class="layui-input-block">
                                                <textarea name="casesIntroduce" lay-verify="required" placeholder="请输入案件简述" class="layui-textarea"></textarea>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">原告人姓名</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="casesPlaintiffName" lay-verify="required" autocomplete="off" placeholder="请输入原告人姓名" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">原告身份证</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="casesPlaintiffIdCard" lay-verify="required|identity" autocomplete="off" placeholder="请输入原告身份证" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">被告人姓名</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="casesDefendantName" lay-verify="required" autocomplete="off" placeholder="请输入被告人姓名" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">被告身份证</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="casesDefendantIdCard" lay-verify="required|identity" autocomplete="off" placeholder="请输入被告身份证" class="layui-input">
                                            </div>
                                        </div>
                                        <blockquote class="layui-elem-quote">
                                            上传诉讼所需证据牌照，将有力证据上传后，工作人员审理后会处理案件
                                        </blockquote>
                                        <div class="layui-row layui-col-space10">
                                            <div class="layui-col-md4">
                                                <!--附件一-->
                                                <div style="text-align: center">
                                                    <div class="layui-upload-drag" id="upload1">
                                                        <i class="layui-icon"></i>
                                                        <p>点击上传证据1图片，或将文件拖拽到此处</p>
                                                        <div class="layui-hide" id="uploadDemoView1">
                                                            <hr>
                                                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                                        </div>
                                                    </div>
                                                    <input id="annex1" name="annex1" lay-verify="image" hidden>
                                                </div>
                                            </div>
                                            <div class="layui-col-md4">
                                                <!--附件二-->
                                                <div style="text-align: center">
                                                    <div class="layui-upload-drag" id="upload2">
                                                        <i class="layui-icon"></i>
                                                        <p>点击上传证据2图片，或将文件拖拽到此处</p>
                                                        <div class="layui-hide" id="uploadDemoView2">
                                                            <hr>
                                                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                                        </div>
                                                    </div>
                                                    <input id="annex2" name="annex2" lay-verify="image" hidden>
                                                </div>
                                            </div>
                                            <div class="layui-col-md4">
                                                <div style="text-align: center">
                                                    <div class="layui-upload-drag" id="upload3">
                                                        <i class="layui-icon"></i>
                                                        <p>点击上传证据3图片，或将文件拖拽到此处</p>
                                                        <div class="layui-hide" id="uploadDemoView3">
                                                            <hr>
                                                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                                                        </div>
                                                    </div>
                                                    <input id="annex3" name="annex3" lay-verify="image" hidden>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="text-align: center">
                                            <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="add">确认提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </section>
      <!-- 尾部 -->
    <div th:replace="common/common::footer"></div>
</body>
<script>
    layui.use(['form','upload'],function () {
        var form = layui.form,upload = layui.upload;


        form.on('submit(add)',function (data) {
            axios.post('/front/cases/add',data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false
        })

        //拖拽上传1
        upload.render({
            elem: '#upload1'
            ,url: '/uploadCases' //改成您自己的上传接口
            ,done: function(res){
                layer.msg(res.msg);
                layui.$('#uploadDemoView1').removeClass('layui-hide').find('img').attr('src', res.data);
                $("#annex1").val(res.data)
            }
        });

        //拖拽上传2
        upload.render({
            elem: '#upload2'
            ,url: '/uploadCases' //改成您自己的上传接口
            ,done: function(res){
                layer.msg(res.msg);
                layui.$('#uploadDemoView2').removeClass('layui-hide').find('img').attr('src', res.data);
                $("#annex2").val(res.data)
            }
        });

        //拖拽上传3
        upload.render({
            elem: '#upload3'
            ,url: '/uploadCases' //改成您自己的上传接口
            ,done: function(res){
                layer.msg(res.msg);
                layui.$('#uploadDemoView3').removeClass('layui-hide').find('img').attr('src', res.data);
                $("#annex3").val(res.data)
            }
        });

        var typeIdDom = null;
        var typeId = null;

        $("#serviceSide").append('<li class="list">服务类型分类 </li>')
        axios.get('/end/type/getAll').then(res => {
            layui.each(res.data.data,function (index,item) {
                $("#serviceSide").append('<li><a id="type'+item.id+'" style="cursor: pointer" onclick="setChoose('+item.id+')">'+item.typeName+'</a> </li>')
            })
        })

        window.setChoose = function (id) {
            $("#casesTypeId").val(id)
            typeId = id;
            if(typeIdDom != null){
                document.getElementById(typeIdDom).style.color = '';
            }
            var domId = 'type' + id;
            typeIdDom = domId;
            document.getElementById(domId).style.color = '#5FB878';
            $("#casesTypeName").val(document.getElementById(domId).textContent)
        }

        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            }
            ,image: function (value) {
                if(value.length < 1){
                    return '图片不可以无哇';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    })
</script>
</html>
